<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="比赛项目成绩管理"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #custom-left>
	        <a-input v-model="queryForm.projectEntryId" placeholder="请输入项目名称" allow-clear @change="search">
	          <template #prefix><icon-search /></template>
	        </a-input>
	        <a-input v-model="queryForm.result" placeholder="请输入比赛结果" allow-clear @change="search">
	          <template #prefix><icon-search /></template>
	        </a-input>
	        <a-input v-model="queryForm.isEffective" placeholder="请选择成绩是否有效" allow-clear @change="search">
	          <template #prefix><icon-search /></template>
	        </a-input>
        <a-button @click="reset">重置</a-button>
      </template>
      <template #custom-right>
        <a-button v-permission="['sport:projectEntryGrade:add']" type="primary" @click="addGrade">
          <template #icon><icon-plus /></template>
          <span>新增</span>
        </a-button>
        <a-tooltip content="导出">
          <a-button v-permission="['sport:projectEntryGrade:export']" class="gi_hover_btn-border" @click="onExport">
            <template #icon>
              <icon-download />
            </template>
          </a-button>
        </a-tooltip>
      </template>
      <template #isEffective="{ record }">
        <a-tag v-if="record.isEffective === 0" color="green">有效</a-tag>
        <a-tag v-else color="red">无效</a-tag>
      </template>
      <template #name="{ record }">
        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['sport:projectEntryGrade:update']" @click="onUpdate(record)">修改</a-link>
          <a-link
            v-permission="['sport:projectEntryGrade:delete']"
            status="danger"
            :disabled="record.disabled"
            @click="onDelete(record)"
          >
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        请录入比赛成绩
      </template>
      <a-form :model="form" :auto-label-width="true" layout="horizontal">
        <a-space direction="vertical" :style="{ width: '300px' }" style="margin: 0 auto">
          <a-form-item field="name" :style="{ width: '300px' }" label="参赛人员/团队">
            <a-select v-model="selectedOptions" style="margin: 0 auto" placeholder="请选择参赛人员/团队" multiple :filter-option="false" :limit="1">
              <a-option v-for="item of options" :value="item.id">{{item.username || item.teamName}}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="result" :style="{ width: '300px' }" label="比赛结果">
            <a-input v-model="form.result" placeholder="请输入比赛结果" />
          </a-form-item>
          <a-form-item field="score" :style="{ width: '300px' }" label="成绩">
            <a-input v-model="form.score" placeholder="请输入成绩" />
          </a-form-item>
          <a-form-item field="isEffective" :style="{ width: '300px' }" label="成绩是否有效">
            <a-select v-model="form.isEffective" style="margin: 0 auto" placeholder="请选择成绩是否有效">
              <a-option :value="0">有效</a-option>
              <a-option :value="1">无效</a-option>
            </a-select>
          </a-form-item>
          <a-form-item v-if="form.isEffective == 1" field="reason" :style="{ width: '300px' }" label="无效原因">
            <a-textarea v-model="form.reason" placeholder="请输入无效原因" />
          </a-form-item>
        </a-space>
      </a-form>
    </a-modal>

    <a-modal v-model:visible="updateVisible" @ok="updateHandleOk" @cancel="updateHandleCancel">
      <template #title>
        请录入比赛成绩
      </template>
      <a-form :model="updateForm" :auto-label-width="true" layout="horizontal">
        <a-space direction="vertical" :style="{ width: '300px' }" style="margin: 0 auto">
          <a-form-item v-if="updateForm.username != ''" field="username" :style="{ width: '300px' }" label="参赛人员">
            <a-input  v-model="updateForm.username" disabled/>
          </a-form-item>
          <a-form-item v-if="updateForm.teamName != ''" field="teamName" :style="{ width: '300px' }" label="参赛团队">
            <a-input  v-model="updateForm.teamName" disabled/>
          </a-form-item>
          <a-form-item field="result" :style="{ width: '300px' }" label="比赛结果">
            <a-input v-model="updateForm.result" placeholder="请输入比赛结果" />
          </a-form-item>
          <a-form-item field="score" :style="{ width: '300px' }" label="成绩">
            <a-input v-model="updateForm.score" placeholder="请输入成绩" />
          </a-form-item>
          <a-form-item field="isEffective" :style="{ width: '300px' }" label="成绩是否有效">
            <a-select v-model="updateForm.isEffective" style="margin: 0 auto" placeholder="请选择成绩是否有效">
              <a-option :value="0">有效</a-option>
              <a-option :value="1">无效</a-option>
            </a-select>
          </a-form-item>
          <a-form-item v-if="updateForm.isEffective == 1" field="reason" :style="{ width: '300px' }" label="无效原因">
            <a-textarea v-model="updateForm.reason" placeholder="请输入无效原因" />
          </a-form-item>
        </a-space>
      </a-form>
    </a-modal>

    <ProjectEntryGradeDetailDrawer ref="ProjectEntryGradeDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import ProjectEntryGradeDetailDrawer from './ProjectEntryGradeDetailDrawer.vue'
import {
  type ProjectEntryGradeResp,
  type ProjectEntryGradeQuery,
  deleteProjectEntryGrade,
  exportProjectEntryGrade,
  listProjectEntryGrade,
  listNoGrade, addProjectEntryGrade, updateProjectEntryGrade
} from '@/apis'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import {useDownload, useForm, useTable} from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'
import { useDict } from '@/hooks/app'
import {Message} from "@arco-design/web-vue";

const route = useRoute();
const projectId = route.query.id as string; // 获取传递的 id

defineOptions({ name: 'ProjectEntryGrade' })

const queryForm = reactive<ProjectEntryGradeQuery>({
  projectId: projectId as string,
  projectEntryId: "",
  result: "",
  score: "",
  isEffective: "",
  sort: ['createTime,desc']
})


const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((page) => listProjectEntryGrade({ ...queryForm, ...page }), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '项目名称', dataIndex: 'projectName', slotName: 'projectName'},
  { title: '参赛者姓名', dataIndex: 'username', slotName: 'username'},
  { title: '参赛团队名称', dataIndex: 'teamName', slotName: 'teamName'},
  { title: '比赛结果', dataIndex: 'result', slotName: 'result' },
  { title: '成绩', dataIndex: 'score', slotName: 'score' },
  { title: '成绩是否有效', dataIndex: 'isEffective', slotName: 'isEffective' },
  {
    title: '操作',
    slotName: 'action',
    width: 130,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['sport:projectEntryGrade:update', 'sport:projectEntryGrade:delete'])
  }
]

// 重置
const reset = () => {
  queryForm.projectEntryId = ""
  queryForm.result = ""
  queryForm.score = ""
  queryForm.isEffective = ""
  search()
}

// 删除
const onDelete = (item: ProjectEntryGradeResp) => {
  return handleDelete(() => deleteProjectEntryGrade(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true
  })
}

// 导出
const onExport = () => {
  useDownload(() => exportProjectEntryGrade(queryForm))
}


const selectedOptions = ref([]);
const options = ref();
const { form } = useForm({
  result: '',
  score: '',
  isEffective: 0,
  reason: '',
})
const visible = ref(false);
const addGrade = async () => {
  visible.value = true;
  console.log(projectId)
  const res = await listNoGrade(projectId);
  options.value = res.data as any;
  console.log(options)
}
const handleOk = async () => {
  const res = await addProjectEntryGrade({
    projectEntryId: selectedOptions.value[0],
    result: form.result,
    score: form.score,
    isEffective: form.isEffective,
    reason: form.reason,
  })
  if (res.code === 200) {
    Message.success(res.msg)
    visible.value = false;
    search()
  } else {
    Message.error(res.msg)
  }
}
const handleCancel = () => {
  visible.value = false;
}

// 修改
const updateVisible = ref(false);
const updateForm = ref(
    {
      id: '',
      username: '',
      teamName: '',
      result: '',
      score: '',
      isEffective: 0,
      reason: '',
    }
)
const onUpdate = (item: ProjectEntryGradeResp) => {
  updateVisible.value = true;
  updateForm.value.id = item.id;
  updateForm.value.username = item.username;
  updateForm.value.teamName = item.teamName;
  updateForm.value.result = item.result;
  updateForm.value.score = item.score;
  updateForm.value.isEffective = item.isEffective as any;
  updateForm.value.reason = item.reason;
}
const updateHandleOk = async () => {
  const res = await updateProjectEntryGrade(updateForm.value,updateForm.value.id)
  if (res.code === 200) {
    Message.success(res.msg)
    updateVisible.value = false;
    search()
  } else {
    Message.error(res.msg)
  }
}
const updateHandleCancel = () => {
  visible.value = false;
}


const ProjectEntryGradeDetailDrawerRef = ref<InstanceType<typeof ProjectEntryGradeDetailDrawer>>()
// 详情
const onDetail = (item: ProjectEntryGradeResp) => {
  ProjectEntryGradeDetailDrawerRef.value?.onDetail(item.id)
}
</script>

<style lang="scss" scoped></style>
